<!DOCTYPE HTML>
<!--
	Prologue 1.2 by HTML5 UP
	html5up.net | @n33co
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
	<head>
		<title>Prologue by HTML5 UP</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600" rel="stylesheet" type="text/css" />
		<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
		<script src="js/jquery.min.js"></script>
		<script src="js/skel.min.js"></script>
		<script src="js/skel-panels.min.js"></script>
		<script src="js/init.js"></script>
		<noscript>
			<link rel="stylesheet" href="css/skel-noscript.css" />
			<link rel="stylesheet" href="css/style.css" />
			<link rel="stylesheet" href="css/style-wide.css" />
		</noscript>
		<!--[if lte IE 9]><link rel="stylesheet" href="css/ie9.css" /><![endif]-->
		<!--[if lte IE 8]><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
		<link rel="stylesheet" type="text/css" media="all" href="css/form/style1.css">
		<script src="css/form/js/script.js"></script>
<!--   		<link rel="stylesheet" type="text/css" media="all" href="css/form/responsive.css"> -->
	</head>
	<body>

		<!-- Header -->
			<div id="header" class="skel-panels-fixed">

				<div class="top">

					<!-- Logo -->
						<div id="logo">
							<span class="image avatar48"><img src="images/avatar.jpg" alt="" /></span>
							<h1 id="title">Jane Doe</h1>
							<span class="byline">Hyperspace Engineer</span>
						</div>

					<!-- Nav -->
						<nav id="nav">
							<!--
							
								Prologue's nav expects links in one of two formats:
								
								1. Hash link (scrolls to a different section within the page)
								
								   <li><a href="#foobar" id="foobar-link" class="skel-panels-ignoreHref"><span class="fa fa-whatever-icon-you-want">Foobar</span></a></li>

								2. Standard link (sends the user to another page/site)

								   <li><a href="http://foobar.tld"><span class="fa fa-whatever-icon-you-want">Foobar</span></a></li>
							
							-->
							<ul>
								<li><a href="#top" id="top-link" class="skel-panels-ignoreHref"><span class="fa fa-home">Intro</span></a></li>
								<li><a href="#portfolio" id="portfolio-link" class="skel-panels-ignoreHref"><span class="fa fa-th">Portfolio</span></a></li>
								<li><a href="#about" id="about-link" class="skel-panels-ignoreHref"><span class="fa fa-user">About Me</span></a></li>
								<li><a href="#contact" id="contact-link" class="skel-panels-ignoreHref"><span class="fa fa-envelope">Contact</span></a></li>
								<li><a href="#test" id="test-link" class="skel-panels-ignoreHref"><span class="fa fa-envelope">Test</span></a></li>
							</ul>
						</nav>
						
				</div>
				
				<div class="bottom">

					<!-- Social Icons -->
						<ul class="icons">
							<li><a href="#" class="fa fa-twitter solo"><span>Twitter</span></a></li>
							<li><a href="#" class="fa fa-facebook solo"><span>Facebook</span></a></li>
							<li><a href="#" class="fa fa-github solo"><span>Github</span></a></li>
							<li><a href="#" class="fa fa-dribbble solo"><span>Dribbble</span></a></li>
							<li><a href="#" class="fa fa-envelope solo"><span>Email</span></a></li>
						</ul>
				
				</div>
			
			</div>

		<!-- Main -->
			<div id="main">
			
				<!-- Intro -->
					<section id="top" class="one">
						<div class="container">

							<a href="http://ineedchemicalx.deviantart.com/art/Moonscape-381829905" class="image featured"><img src="images/pic01.jpg" alt="" /></a>

							<header>
								<h2 class="alt">This is <strong>Prologue</strong>. A <a href="http://html5up.net/license">free</a>, fully responsive<br />
								site template by <a href="http://html5up.net">HTML5 UP</a>.</h2>
							</header>
							
							<p>Ligula scelerisque justo sem accumsan diam quis. Vitae natoque dictum 
							etiam semper magnis enim feugiat convallis convallis egestas rhoncus ridiculus 
							in quis risus curabitur tempor. Orci penatibus quisque laoreet condimentum 
							sollicitudin accumsan elementum.</p>

							<footer>
								<a href="#portfolio" class="button scrolly">Magna Aliquam</a>
							</footer>

						</div>
					</section>
					
				<!-- Portfolio -->
					<section id="portfolio" class="two">
						<div class="container">
					
							<header>
								<h2>Portfolio</h2>
							</header>
							
							<p>Vitae natoque dictum etiam semper magnis enim feugiat convallis convallis
							egestas rhoncus ridiculus in quis risus amet curabitur tempor orci penatibus.
							Tellus erat mauris ipsum fermentum etiam vivamus eget. Nunc nibh morbi quis 
							fusce hendrerit lacus ridiculus.</p>
						
							<div class="row">
								<div class="4u">
									<article class="item">
										<a href="http://ineedchemicalx.deviantart.com/art/A-million-suns-384369739" class="image full"><img src="images/pic02.jpg" alt="" /></a>
										<header>
											<h3>Ipsum Feugiat</h3>
										</header>
									</article>
									<article class="item">
										<a href="http://ineedchemicalx.deviantart.com/art/Mind-is-a-clear-stage-375431607" class="image full"><img src="images/pic03.jpg" alt="" /></a>
										<header>
											<h3>Rhoncus Semper</h3>
										</header>
									</article>
								</div>
								<div class="4u">
									<article class="item">
										<a href="http://ineedchemicalx.deviantart.com/art/You-really-got-me-345249340" class="image full"><img src="images/pic04.jpg" alt="" /></a>
										<header>
											<h3>Magna Nullam</h3>
										</header>
									</article>
									<article class="item">
										<a href="http://ineedchemicalx.deviantart.com/art/Ad-infinitum-354203162" class="image full"><img src="images/pic05.jpg" alt="" /></a>
										<header>
											<h3>Natoque Vitae</h3>
										</header>
									</article>
								</div>
								<div class="4u">
									<article class="item">
										<a href="http://ineedchemicalx.deviantart.com/art/Elysium-355393900" class="image full"><img src="images/pic06.jpg" alt="" /></a>
										<header>
											<h3>Dolor Penatibus</h3>
										</header>
									</article>
									<article class="item">
										<a href="http://ineedchemicalx.deviantart.com/art/Emperor-of-the-Stars-370265193" class="image full"><img src="images/pic07.jpg" alt="" /></a>
										<header>
											<h3>Orci Convallis</h3>
										</header>
									</article>
								</div>
							</div>

						</div>
					</section>

				<!-- About Me -->
					<section id="about" class="three">
						<div class="container">

							<header>
								<h2>About Me</h2>
							</header>

							<a href="http://ineedchemicalx.deviantart.com/art/Pasadena-357650036" class="image featured"><img src="images/pic08.jpg" alt="" /></a>
							
							<p>Tincidunt eu elit diam magnis pretium accumsan etiam id urna. Ridiculus 
							ultricies curae quis et rhoncus velit. Lobortis elementum aliquet nec vitae 
							laoreet eget cubilia quam non etiam odio tincidunt montes. Elementum sem 
							parturient nulla quam placerat viverra mauris non cum elit tempus ullamcorper 
							dolor. Libero rutrum ut lacinia donec curae mus vel quisque sociis nec 
							ornare iaculis.</p>

						</div>
					</section>
			
				<!-- Contact -->
					<section id="contact" class="four">
						<div class="container">

							<header>
								<h2>Contact</h2>
							</header>

							<p>Elementum sem parturient nulla quam placerat viverra 
							mauris non cum elit tempus ullamcorper dolor. Libero rutrum ut lacinia 
							donec curae mus. Eleifend id porttitor ac ultricies lobortis sem nunc 
							orci ridiculus faucibus a consectetur. Porttitor curae mauris urna mi dolor.</p>
							
							<form method="post" action="#">
								<div class="row half">
									<div class="6u"><input type="text" class="text" name="name" placeholder="Name" /></div>
									<div class="6u"><input type="text" class="text" name="email" placeholder="Email" /></div>
								</div>
								<div class="row half">
									<div class="12u">
										<textarea name="message" placeholder="Message"></textarea>
									</div>
								</div>
								<div class="row">
									<div class="12u">
										<a href="#" class="button submit">Send Message</a>
									</div>
								</div>
							</form>

						</div>
					</section>
					<section id="test" class="five">
<!-- 						<div class="container"> -->
							<header>
								<h2>About</h2>
							</header>
							<form id="contact-form" action="/" method="post">
								<div>
									<label>
										<span>Firstname:</span>
										<input placeholder="Firstname" type="text" tabindex="1" required autofocus>
									</label>
								</div>
								<div>
									<label>
										<span>Lastname:</span>
										<input placeholder="Lastname" type="text" tabindex="1" required autofocus>
									</label>
								</div>
								<div>
									<label>
										<span>Work and Education:</span>
										<input placeholder="eg. phonemap.com" type="text" tabindex="1" required autofocus>
									</label>
								</div>
								<div>
									<label>
										<span>Live:</span>
										<input placeholder="Place living" type="text" tabindex="1" required autofocus>
									</label>
								</div>
								<div>
									<label>
										<span>Birth Date:</span>
										<input placeholder="MM/DD" type="text" tabindex="1" required autofocus>
									</label>
								</div>
								<div>
									<label>
										<span>Birth Year:</span>
										<input placeholder="YYYY" type="text" tabindex="1" required autofocus>
									</label>
								</div>
								<div>
									<label>
										<span>Interested in:</span>
										<select>
											<option>---</option>
											<option>All</option>
											<option>Men</option>
											<option>Women</option>
										</select>
									</label>
								</div>
								<div>
									<label>
										<span>Relationship status:</span>
										<select name="status">
										<option value="0">---</option>
										<option value="1" selected="1">Single</option>
										<option value="2">In a relationship</option>
										<option value="5">Engaged</option>
										<option value="4">Married</option>
										<option value="3">In an open relationship</option>
										<option value="6">It's complicated</option>
										<option value="8">Separated</option>
										<option value="9">Divorced</option>
										<option value="7">Widowed</option>
										</select> 										
										
									</label>
								</div>
								<div>
									<label>
										<span>Email:</span>
										<input placeholder="Please enter your email address" type="email" tabindex="2" required>
									</label>
								</div>
								<div>
									<label>
										<span>Mobile Phone:</span>
										<input placeholder="Please enter your number" type="tel" tabindex="3" required>
									</label>
								</div>
								<div>
									<label>
										<span>Website:</span>
										<input placeholder="Begin with http://" type="url" tabindex="4" required>
									</label>
								</div>
								<div>
									<label>
										<span>Message:</span>
										<textarea placeholder="Include all the details you can" tabindex="5" required></textarea>
									</label>
								</div>
								<div>
									<button name="submit" type="submit" id="contact-submit">Send Email</button>
								</div>
							</form>
<!-- 							<form method="post" action="#"> -->
<!-- 								<div id="wrapping" class="clearfix"> -->
<!-- 								<section id="aligned"> -->
<!-- 								<div> -->
<!-- 									<label> -->
<!-- 										<span>Name:</span> -->
<!-- 										<input type="text" name="name" id="name" placeholder="Your name" autocomplete="off" tabindex="1" class="txtinput"> -->
<!-- 									</label> -->
<!-- 								</div> -->
								
							
<!-- 								<input type="email" name="email" id="email" placeholder="Your e-mail address" autocomplete="off" tabindex="2" class="txtinput"> -->
							
<!-- 								<input type="url" name="website" id="website" placeholder="Website URL" autocomplete="off" tabindex="3" class="txtinput"> -->
							
<!-- 								<input type="tel" name="telephone" id="telephone" placeholder="Phone number?(optional)" tabindex="4" class="txtinput"> -->
							
<!-- 								<textarea name="message" id="message" placeholder="Enter a cool message..." tabindex="5" class="txtblock"></textarea> -->
<!-- 								</section> -->
								
<!-- 								<section id="aside" class="clearfix"> -->
<!-- 									<section id="recipientcase"> -->
<!-- 									<h3>Recipient:</h3> -->
<!-- 										<select id="recipient" name="recipient" tabindex="6" class="selmenu"> -->
<!-- 					  						<option value="staff">Site Staff</option> -->
<!-- 					  						<option value="editor">Editor-in-Chief</option> -->
<!-- 					  						<option value="technical">Tech Department</option> -->
<!-- 					  						<option value="pr">Public Relations</option> -->
<!-- 					  						<option value="support">General Support</option> -->
<!-- 										</select> -->
<!-- 									</section> -->
									
<!-- 									<section id="prioritycase"> -->
<!-- 										<h3>Priority:</h3> -->
<!-- 										<span class="radiobadge"> -->
<!-- 											<input type="radio" id="low" name="priority" value="low"> -->
<!-- 											<label for="low">Low</label> -->
<!-- 										</span> -->
									
<!-- 										<span class="radiobadge"> -->
<!-- 											<input type="radio" id="med" name="priority" value="med" checked="checked"> -->
<!-- 											<label for="med">Medium</label> -->
<!-- 										</span> -->
									
<!-- 										<span class="radiobadge"> -->
<!-- 											<input type="radio" id="high" name="priority" value="high"> -->
<!-- 											<label for="high">High</label> -->
<!-- 										</span> -->
<!-- 									</section> -->
<!-- 								</section> -->
<!-- 							</div> -->
					
					
<!-- 							<section id="buttons"> -->
<!-- 								<input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset"> -->
<!-- 								<input type="submit" name="submit" id="submitbtn" class="submitbtn" tabindex="7" value="Submit this!"> -->
<!-- 								<br style="clear:both;"> -->
<!-- 							</section> -->
<!-- 							</form> -->
<!-- 						</div> -->
					</section>
			
			</div>

		<!-- Footer -->
			<div id="footer">
				
				<!-- Copyright -->
					<div class="copyright">
						<p>&copy; 2013 Jane Doe. All rights reserved.</p>
						<ul class="menu">
							<li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
							<li>Images: <a href="http://ineedchemicalx.deviantart.com">Felicia Simion</a></li>
						</ul>
					</div>
				
			</div>

	</body>
</html>